<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">用户管理</div>
                <div class="layui-card-body">
                <div class="demoTable">
                    <label class="layui-inline"> 用户名：</label>
                    <div class="layui-inline">
                        <input class="layui-input" name="realName"  autocomplete="off">
                    </div>
                    <label class="layui-inline">登陆名：</label>
                    <div class="layui-inline">
                        <input class="layui-input" name="userName"  autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <div class="layui-card-body">
                    <table id="demo" lay-filter="demo"></table>

                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="insertUser">新增</button>
         <button class="layui-btn layui-btn-sm" lay-event="deleteUser">删除</button><!--
         <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>&ndash;&gt;-->
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,toolbar: '#toolbarDemo'
            ,url: '/api/user/sysUser/index' //数据接口
            ,response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                ,statusCode:200  //规定成功的状态码，默认：0
                ,countName: 'count' //规定数据总数的字段名称，默认：count
            }
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,id:'sysUser'
            ,page: true //开启分页
            ,where: { id: "" }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{type:'numbers',title: '序号'}
                ,{field: 'id', title: 'ID', sort: true, fixed: 'left',hide:'false'}
                ,{field: 'realName', title: '用户名'}
                ,{field: 'userName', title: '登录名'}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'state', title: '状态'}
                ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'}
            ]]
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list ,//解析数据列表
                    "count": res.data.total //解析数据列表
                };
            }
        })
        //查询方法
        var $ = layui.$, active = {
            reload: function(){
                var userName = $("input[name='userName']");
                var realName = $("input[name='realName']");
                //执行重载
                table.reload('sysUser', {
                    //重新从第 1 页开始
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                       'userName': userName.val(),
                        'realName':realName.val()
                    } ,method:'GET'
                });
            }

        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听单元格编辑
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            axios.post('/api/user/sysUser/updateOrInsertByUser', data).then(function (response) {
                 if(response.data.code==200){
                     layer.msg(response.data.data+'</br>'+ field + ' 字段更改为：'+ value);
                 }
                }) .catch(function (error) {
                    console.log(error);
                });

        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
               /* layer.msg('ID：'+ data.id + ' 的查看操作');*/
                layer.open({
                    title:'查看用户',
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '../views/user/create.html?type=look&id='+data.id
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    axios.get('/api/user/sysUser/deleteUserById/'+data.id, '').then(function (response) {
                        if(response.data.code==200){
                            obj.del();
                            active['reload'].call(this) ;
                            layer.msg(response.data.data)
                        }
                    }) .catch(function (error) {
                        console.log(error);
                        layer.msg(response.data.data)
                    });

                    layer.close(index);

                });
            } else if(obj.event === 'edit'){
                //iframe层-父子操作
                layer.open({
                    title:'修改用户',
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '../views/user/create.html?type=edit&id='+data.id,
                    end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                        //index 页面 是否被修改 2 被修改 其他未被修改
                        if($('#isReload', window.parent.document).val()=='2'){
                            active['reload'].call(this) ;
                            $('#isReload').val('1');
                        }
                    }
                });
            }
        });
        table.on('toolbar(demo)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'insertUser':
                    layer.open({
                        title:'新增用户',
                        type: 2,
                        area: ['700px', '450px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '../views/user/create.html?type=insert',
                        end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                            //是否被修改 2 被修改 其他未被修改
                            if($('#isReload', window.parent.document).val()=='2'){
                                active['reload'].call(this) ;
                                $('#isReload').val('1');
                            }
                        }
                    });
                    break;
                case 'deleteUser':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;

            };
        });
    });

</script>
<style scoped>

</style>